import React, { useEffect, useState } from "react";
import { Layout, Menu } from "antd";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { Link, BrowserRouter as Router } from "react-router-dom";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  HomeOutlined,
} from "@ant-design/icons";
import mergeReducer from "./store/reducers";

import RouterConfig from "./route";
import { useCollapsed } from './App.effect'

import styles from "./App.module.css";

const { Header, Sider, Content } = Layout;

const MENU_CONFIG = [
  {
    key: "home",
    pathname: "/",
    icon: <HomeOutlined />,
    children: "首页",
  },
  {
    key: "list",
    pathname: "/list",
    icon: <HomeOutlined />,
    children: "列表",
  },
];

function App() {
  const currentPathname = window.location.pathname?.replace("/", "") || "home";
  // 控制菜单展开关闭的业务逻辑
  const {collapsed, collapsedContrulor} = useCollapsed();

  const menuItems = MENU_CONFIG.map((item) => {
    const { children, key, icon, pathname } = item;
    return (
      <Menu.Item key={key} icon={icon}>
        <Link to={pathname}>{children}</Link>
      </Menu.Item>
    );
  });
  return (
    <Provider store={createStore(mergeReducer)}>
      <Router>
        <Layout className={styles["pages-wrap"]}>
          <Sider trigger={null} collapsible collapsed={collapsed}>
            <div className={styles["logo"]} />
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={[currentPathname]}
            >
              {menuItems}
            </Menu>
          </Sider>
          <Layout>
            <Header
              className={styles["site-layout-background"]}
              style={{ padding: 0 }}
            >
              {collapsed ? (
                <MenuUnfoldOutlined
                  className={styles["trigger"]}
                  onClick={collapsedContrulor}
                />
              ) : (
                <MenuFoldOutlined
                  className={styles["trigger"]}
                  onClick={collapsedContrulor}
                />
              )}
            </Header>
            <Content
              className="site-layout-background"
              style={{
                margin: "24px 16px",
                padding: 24,
                minHeight: 280,
              }}
            >
              <RouterConfig />
            </Content>
          </Layout>
        </Layout>
      </Router>
    </Provider>
  );
}

export default App;
